<template>
  <section class="QuickDate__container">
    <div class="date">
      <span class="day">{{ day }}</span>
      <span class="month">{{ year }}/{{ month }}</span>
      <!-- <span class="year">{{ year }}</span> -->
    </div>
  </section>
</template>

<script>
import moment from "moment";

export default {
  props: {
    date: {
      type: Date,
      default: () => {
        return new Date();
      },
    },
  },

  computed: {
    year() {
      return moment(this.date).format("yyyy");
    },
    month() {
      return moment(this.date).format("MM");
    },
    day() {
      return moment(this.date).format("DD");
    },
  },
};
</script>

<style lang="scss" scoped>
.QuickDate__container {
  // border: 1px solid red;

  .date {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    margin: 2px;
    padding: 0 5px;
    color: #999;
    // border: coral 1px solid;
    // border-radius: 2px;
    // border-top: none;
    // border-bottom: none;
    // background: #2878ff;

    .year {
      font-size: 1.2rem;
      margin-top: 5px;

      &::after {
        content: "";
        font-size: 1.2rem;
      }
    }

    .month {
      font-size: 1.2rem;
      margin-left: 3.5px;

      // &::after {
      //   content: "月";
      //   font-size: 1.2rem;
      // }
    }

    .day {
      font-size: 4rem;
      color: #666;
      margin-bottom: 5px;
    }
  }
}
</style>